<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>系统角色管理</title>
		<link rel="stylesheet" href="../../js/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">

		<script src="../../js/bower_components/jquery/dist/jquery.min.js"></script>
		<script src="../../js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="../../js/bower_components/bootbox.min.js"></script>
		<script src="../../js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../../js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="../../js/bower_components/bootstrap-table/dist/bootstrap-table.js"></script>
		<script src="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="../../js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

		<script src="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../../js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
		<script src="../../js/bower_components/moment/min/moment-with-locales.min.js"></script>

		<script>
			$(function() {
				param='{ "pager": {"pageoffset": 0,"pagesize": 5}}'
				//数据集合
				$.ajax({
					url: "http://localhost:9999/getAll",
					data: param,
					contentType:'application/json;charset=UTF-8',
					type: "PUT",
					success: function(result) {
						createTable(result.data.list);
					},
					error: function (result) {
						console.log(result.responseJSON.message);
					}
				});
				$("table").bootstrapTable({
					locale: 'zh-CN'
				});
				initDictType();
				//模糊查詢
				$('#btnSearch').click(function() {
					var rname = $("#txtRolename").val();
					var risenable = $('#selRoleisenable').selectpicker('val');

					param='{"page":0,"pageSize":3';
					if(rname.trim()!=""&& rname.trim()!=null){

						param+=',"rname":"'+rname+'"';
					}
					if(risenable!=null && risenable!=-1){
						param+=',"risenable":"'+isenable+'"';
					}
					param+="}"
					alert(param);
					$.ajax({
						type: "POST",
						data: param,
						dataType: "json",
						url: "http://localhost:9999/getAll",
						contentType: "application/json;charset=utf-8",
						success: function(result) {
							console.log(result);
							createTable(result.data.list);
						}
					});
				});
				//新增数据
				$("#btnAdd").click(function() {
					$('#divAddUser').modal();
				});
				//删除数据
				$("#btnDel").click(function() {
					var uid = getSelect();
					if(uid != null) {
						DelDate(uid);
					}

				});
				//修改数据
				$("#btnEdit").click(function() {
					var uid = getSelect();
					console.log(uid);
					if(uid != null) {
						EditDate(uid);
					}

				});

				//从列表中删除数据
				function DelDate(uid) {
					console.log(uid);
					$.ajax({
						type: "get",
						dataType: "json",
						url: "sysUser.json",
						success: function(result) {
							var str = [],
									i;
							//下面使用each进行遍历
							$.each(result, function(n, value) {
								//alert(n + ' ' + value);
								if(value["uid"] != uid) {
									console.log(str);
									str.push(value);
								}
							});
							console.log(str.length);
							if(str.length > 0) {
								createTable(str);;
							} else {
								createTable(result);;
							}
						}
					});
				}
			});
			//列表数据绑定
			function createTable(arr) {
				console.log("列表绑定的数据："+arr);
				$("#tblResult").bootstrapTable('destroy');
				$("#tblResult").bootstrapTable({
					loadMsg: '正在加载...',
					//url: "sysUser.json", //请求后台的URL（*）
					data: arr,
					//queryParams: "queryParams",
					//sidePagination: 'client', //分页方式：client客户端分页，server服务端分页（*）
					striped: true, // 是否显示行间隔色
					clickToSelect: true,
					contentType: 'application/json;charset=utf-8',
					uniqueId: "value", //每一行的唯一标识，一般为主键列
					//pageSize: "5", //每页的记录行数（*）
					//pagination: true, // 是否分页
					//sortable: true, // 是否启用排序
					//sortOrder: "desc",
					idField: "rid",
					checkboxHeader: true,
					singleSelect: true, //开启单选
					onClickRow: function(row) {
						alert(row.value);
						gbid = row.value;
					},
					columns: [{
						field: "state",
						checkbox: true,
						align: 'center',
					}, {
						field: 'rid',
						title: "<span class='glyphicon glyphicon-tags' /> 角色名",
						halign: 'center'
					}, {
						field: 'rname',
						title: "角色名称",
						halign: 'center'
					}, {
						field: 'risenable',
						title: "是否启用",
						halign: 'center'
					}]
				});
			}
			//下拉框权限绑定

			function initDictType() {
				$('#selRoleisenable').empty();
				$.ajax({
					type: 'Get',
					url: 'zidian.json',
					dataType: "Json",
					success: function(data) {
						if(!data.flag) {
							$.each(data, function(i, n) {
								$('#selRoleisenable').append(" <option value=\"" + n.isenable + "\">" + n.isenablename + "</option>");
							})
							$('#selRoleisenable').selectpicker('refresh');
						}
					}
				});
				option = new Option("全部", "-1");
				$('#selRoleisenable').append(option); //注入
				$('#selRoleisenable').selectpicker("refresh"); //刷新
				$('#selRoleisenable').selectpicker("render"); //您可以使用render方法强制重新渲染引导程序
			}
			//获取列表选中行

			function getSelect() {
				var a = $("#tblResult").bootstrapTable('getSelections');
				if(a.length > 0) {
					return a[0].uid;
				} else {
					bootbox.alert("必须要选择一条信息！");
				}
			}
		</script>
	</head>

	<body>
		<!--查询区域-->
		<div class="container-fluid">
			<div class="row col-md-10">
				<div id="divSearchForm" class="form-inline">
					<div class="form-group">
						<label class="control-label" for="txtRolename">角色名称：</label>
						<input class="form-control" type="text" id="txtRolename" />
					</div>
					<div class="form-group">
						<label class="control-label" for="selRoleisenable">是否启用：</label>
						<select id="selRoleisenable"></select>
					</div>
					<div class="form-group">
						<button type="button" id="btnSearch" class="btn btn-primary">
							检索
						</button>
					</div>
				</div>
			</div>
			<!--功能区域-->
			<div style="margin-top: 5px;" class="row col-md-10">
				<div id="toolsButtons">
					<button type="button" id="btnAdd" class="btn btn-success">新增</button>
					<button type="button" id="btnEdit" class="btn btn-info">修改</button>
					<button type="button" id="btnDel" class="btn btn-danger">删除</button>
				</div>
			</div>
			<!--列表区域-->
			<div class="row col-md-10" style="margin-top: 10px;">
				<table id="tblResult"></table>
			</div>
		</div>

		<!-- 新增数据 -->
		<div class="modal fade" id="divAddUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">新增用户信息</h4>
					</div>
					<div class="modal-body form-inline ">
						<div class="form-group">
							<label class="control-label" for="tbxAssetsCodeEdit">用户名：</label>
							<input style="width: 230px;" class="form-control" type="text" id="tbxAssetsCodeEdit" />
						</div>
						<div class="form-group" style="margin-top: 5px;">
							<label class="control-label" for="tbxAssetsNameEdit">昵&nbsp;&nbsp;&nbsp;称：</label>
							<input style="width: 230px;" class="form-control" type="text" id="tbxAssetsNameEdit" required="required" />
						</div>
						<!--<div class="form-group" style="margin-top: 5px; ">
							<label class="control-label" for="selCategoryEdit1">权&nbsp;&nbsp;&nbsp;限：</label>
							<select style="width: 310px;" id="selSysUserRole1"></select>
						</div>
						<div class="form-group" style="margin-top: 5px;">
							<label class="control-label" for="selPowerTypeEdit">创建时间：</label>
							<div class="input-group date form_datetime " style="width: 310px;" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
							</div>-->

							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-primary">保存</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
		</div>
	</body>

</html>
